<template>
    <div class="sizer">
        <van-tabs type="card" v-model="radios.type">
            <van-tab
                :title="item.name"

                v-for="item in type"
                :key="item.id"
            >
            </van-tab>
        </van-tabs>
        <van-tabs type="card" class="Charge" v-model="radios.Charge">
            <van-tab
                :title="item.name"

                v-for="item in Charge"
                :key="item.id"
            >
            </van-tab>
        </van-tabs>
        <van-tabs type="card" class="condition" v-model="radios.condition">
            <van-tab
                :title="item.name"
                v-for="item in condition"
                :key="item.id"

            >
            </van-tab>
        </van-tabs>
        <video-result class="videoResult" :id="id" :genres="radios" />
    </div>
</template>

<script>
import { getOptionals } from '@/api/jia';
import VideoResult from './VideoResult.vue';
export default {
    name: 'sizer',
    props: {
        id: {
            type: [Number, String],
            require: true
        }
    },
    data() {
        return {
            radios: {
                type: 0,
                Charge: 0,
                condition: 0
            }, // 绑定被点击的类型索引号
            type: [], // 全部可选类型
            Charge: [], // 全部可选类型
            condition: [] // 全部可选类型
        };
    },
    methods: {
        async getOptionals() {
            // 获取所有可选择类型数据
            try {
                const { data } = await getOptionals({ id: this.id });
                this.type = data.type;
                this.Charge = data.Charge;
                this.condition = data.condition;
            } catch (eror) {
                this.$toast('请检查网络刷新重试');
            }
        }
    },
    created() {
        this.getOptionals();
    },
    watch: {
        id() {
            this.getOptionals();
        }
    },
    components: {
        VideoResult
    }

};
</script>

<style scoped lang="scss">
.sizer {
    background-color: #fff;
    /deep/.van-tabs__content {
        display: none;
    }
    /deep/.van-tabs__nav {
        height: 60px;
    }
    /deep/.van-tabs--card > .van-tabs__wrap {
        height: 60px;
    }
    /deep/.van-tab {
        padding: 0 0.04rem;
        font-size: 28px;
        line-height: 50px;
        width: 100px;
        color: #333;
        border-right: unset;
    }
    /deep/.van-tabs__nav--card {
        border: 0.01rem solid transparent;
    }

    /deep/.van-tabs__nav--card .van-tab.van-tab--active {
        background-color: unset;
        border: 0.01rem solid #ff9800;
        color: #ff9800;
    }
    /deep/.van-tabs {
        // margin: 12px 20px;
        padding: 0.12rem 0.2rem;
    }
    .condition {
        // margin-right: 396px;
        margin-left: 7px;
        /deep/.van-tab {
            flex: 0.142;
        }
    }
    .Charge {
        // margin-right: 488px;
        margin-left: 7px;
        /deep/.van-tab {
            flex: 0.141;
        }
    }
}
.videoResult {
    padding: 20px 0px 0px 20px;
}
</style>
